<template>
	<div ref="container"></div>
</template>

<script>
	import {
		Line
	} from "@antv/g2plot";
	export default {
		props: {
			LineData: {
				type: Array
			}
		},
		data() {
			return {
				type: {
					'cpu': "CPU",
					'memory': "内存",
					'network': "网络"
				}
			}
		},
		mounted() {
			this.initChart()
		},
		methods: {
			initChart() {
				this.createChart(this.$refs['container'], this.LineData);

			},
			createChart(container, data) {
				const line = new Line(container, {
					data,
					padding: "auto",
					xField: "date",
					yField: "value",
					seriesField: 'country',
					xAxis: {
						tickCount: 5,
						type: 'time',
					},
					smooth: true,
					tooltip: {
						formatter: (datum) => {
							return {
								name: this.type[datum.country],
								value: datum.value
							};
						},
					},
				});
				line.render();
			},
		}
	};
</script>

<style lang="scss" scoped></style>
